import React, { useState, useContext } from 'react';
import { Tab, Tabs } from '@material-ui/core';
import { DashboardContext } from '@/pages/dashboard';

export const RenderTabs = () => {
  const { currentTab, updateTab, amountInfo } = useContext(DashboardContext);

  const change = (event: React.SyntheticEvent, newValue: number) => {
    updateTab(newValue);
  };

  return (
    <Tabs value={currentTab} onChange={change}>
      {amountInfo?.map((info, index) => (
        <Tab key={index} label={info.productName} />
      ))}
    </Tabs>
  );
};
